 <style src="../../style/statistics.css" scoped></style>
<template>
    <div>
        <Row>
            <Col class="col-margin" span="24">
            所属地区：
            <!-- <Select v-model="searchModel.AreaCode"  placeholder="请选择..." style="width:120px" >
                <Option :value="userInfo.AreaCode">{{(userInfo.AreaCode=='530000000000')?'全省':'全市（州）'}}</Option>
                <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
            </Select>                          -->
            <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange' style="width: 220px;display:inline-block" ></Cascader>
            填报年度:
            <Select v-model="searchModel.FillInYear" placeholder="全部" :label-in-value="true"  style="width:100px">
                <Option :value="item.DictValue" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            项目来源：
            <Select v-model="searchModel.ProjectSource" placeholder="请选择" :label-in-value="true" style="width:120px">
                <Option  value="" >全部</Option>
                <Option v-for="(item,index) in ProjectSourceList" :value="item" :key="index">{{ item }}</Option>
            </Select>
            项目名称：
            <Input v-model="searchModel.ProjectName" style="width:120px" placeholder="请输入关键字"></Input>
            <Button icon="ios-search" type="ghost" @click="getPageData()">查询</Button>
            <Button  type="primary"  @click="Download()">导出列表</Button> 
            </Col>
        </Row>
        <Row>
            <Col span="24" class="col-margin" >            
            <!-- <Table size="small"  :height="clientHeight" border  :columns="columnsList" :data="dataList" no-data-text='暂无数据...'></Table> -->
            <div >
            <table class="statisTable"  >
                <thead>
                        <tr>
                            <th rowspan="3" style="width:180px">项目名称</th>
                            <th rowspan="3">所属地区</th>
                            <th rowspan="3">项目来源</th>
                            <th rowspan="3">实施年限（*年*月*日-*年*月*日）</th>
                            <th rowspan="2" colspan="2">项目资金（万元）</th>
                            <th rowspan="2" colspan="3">计划面积产量指标</th>  
                            <th rowspan="3" >操作</th>
                        </tr>
                        <tr>                        
                        </tr>
                        <tr>
                            <th>项目安排</th>
                            <th>配套</th>
                            <th>面积（亩）</th>
                            <th>产量（吨）</th>
                            <th>其他</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(dataModel,index) in dataList" :key="index" :style="rowStyle(index,dataList.length)">
                            <td style="text-align:center;width:180px" >                                
                                {{dataModel.ProjectName}}                                
                            </td>
                            <td style="text-align:center">
                                {{dataModel.AreaName}}
                            </td>
                            <td style="text-align:center">                               
                                {{dataModel.ProjectSource}}
                            </td>
                            <td style="text-align:center">                                
                                {{dataModel.Age}}                             
                            </td>
                            <td>                        
                                {{dataModel.ProjectArrange}}                                
                            </td> 
                            <td>                                
                                {{dataModel.ProjectSupport}}                                
                            </td>
                            <td>                                
                                {{dataModel.PlanArea}}                               
                            </td> 
                            <td>                                
                                {{dataModel.PlanYield}}                                   
                            </td>
                            <td style="text-align:center">                                
                                {{dataModel.PlanOther}}                               
                            </td>
                            <td style="text-align: center;">                                
                                <i-button size="small" icon="ios-list-outline"  style="color:#FF0000" @click="showDetail=true,detailModel=dataModel">
                                    <span style="color:#000;">详情</span>
                                </i-button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </div>
            </Col>
        </Row>
        <!-- <Row>
            <Col span="24">
            <Page class="page-style" :total="dataList.length" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
            </Col>
        </Row> -->
        <Modal v-model="showDetail" :mask-closable="false" width="1300" :styles="{top:'10px'}">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">详细表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <table class="statisTable"  >
                <thead>
                    <tr>
                        <th rowspan="2" style="width:180px">项目名称</th>
                        <th rowspan="2">所属地区</th>
                        <th rowspan="2">项目来源</th>
                        <th rowspan="2">实施年限（*年*月*日-*年*月*日）</th>
                        <th  colspan="2">项目资金（万元）</th>
                        <th  colspan="3">计划面积产量指标</th> 
                        <!-- <th colspan="14">项目完成情况</th>
                        <th rowspan="2" colspan="5">推广情况</th>                            
                        <th rowspan="3">未完成情况说明</th> -->
                    </tr>
                    <!-- <tr>
                        <th colspan="4">总体完成情况</th>
                        <th colspan="7">测产验收情况</th>
                        <th colspan="3">项目增效情况</th>                            
                    </tr> -->
                    <tr>
                        <th>项目安排</th>
                        <th>配套</th>
                        <th>面积（亩）</th>
                        <th>产量（吨）</th>
                        <th>其他</th>
                        <!-- <th>实施地点</th>
                        <th>品种</th>
                        <th>面积（亩）</th>
                        <th>总产（吨）</th>
                        <th>测产面积（亩）</th>
                        <th>测产样本数（点数）</th>
                        <th>测产品种</th>
                        <th>测产平均亩产（公斤/亩）</th>
                        <th>最高亩产（吨）</th>
                        <th>对照品种</th>
                        <th>对照平均亩产（公斤/亩）</th>
                        <th>平均价格（元）</th>
                        <th>平均亩增加投入（元）</th>
                        <th>平均亩增加收益（元）</th>
                        <th>涉及乡镇数（个）</th>
                        <th>涉及村数（个）</th>
                        <th>涉及农户数（户）</th>
                        <th>涉及农业人数（人）</th>
                        <th>带动面积（亩）</th> -->
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align:center;width:180px" >                                
                            {{detailModel.ProjectName}}                                
                        </td>
                        <td style="text-align:center">
                            {{detailModel.AreaName}}
                        </td>
                        <td style="text-align:center">                               
                            {{detailModel.ProjectSource}}
                        </td>
                        <td style="text-align:center">                                
                            {{detailModel.Age}}                             
                        </td>
                        <td>                        
                            {{detailModel.ProjectArrange}}                                
                        </td> 
                        <td>                                
                            {{detailModel.ProjectSupport}}                                
                        </td>
                        <td>                                
                            {{detailModel.PlanArea}}                               
                        </td> 
                        <td>                                
                            {{detailModel.PlanYield}}                                   
                        </td>
                        <td style="text-align:center">                                
                            {{detailModel.PlanOther}}                               
                        </td>
                        <!-- <td style="text-align:center">
                            {{detailModel.ImplePlace}}                                
                        </td> 
                        <td style="text-align:center">
                            {{detailModel.FVariety}}
                        </td>
                        <td>
                            {{detailModel.FArea}}
                        </td>
                        <td>
                            {{detailModel.FYield}}
                        </td> 
                        <td>
                            {{detailModel.CCArea}}                             
                        </td>
                        <td>
                            {{detailModel.CCSamples}}
                        </td>
                        <td>
                            {{detailModel.CCVariety}}
                        </td>
                        <td>
                            {{detailModel.CCavgMuYield}}
                        </td>
                        <td>
                            {{detailModel.CCbestMuYield}}  
                        </td>
                        <td>
                            {{detailModel.CCdzVariety}}
                        </td>  
                        <td>
                            {{detailModel.CCdzAvgMuYield}} 
                        </td>
                        <td>
                            {{detailModel.AvgPrice}}
                        </td>
                        <td>
                            {{detailModel.AvgMuInvest}}
                        </td>
                        <td>
                            {{detailModel.AvgMuIncome}} 
                        </td>
                        <td>
                            {{detailModel.Townships}}
                        </td>
                        <td>
                            {{detailModel.Villages}}  
                        </td>
                        <td>
                            {{detailModel.Farrmers}}  
                        </td>
                        <td>
                            {{detailModel.Peoples}}
                        </td>
                        <td>
                            {{detailModel.DDArea}}
                        </td>
                        <td style="text-align:center">
                            {{detailModel.unFinishDescribe}}
                        </td> -->
                    </tr>
                    <tr><th style="background-color:white;height:40px"></th></tr>
                    <tr>
                        <th colspan="14">项目完成情况</th>
                    </tr>
                    <tr>
                        <th colspan="4">总体完成情况</th>
                        <th colspan="7">测产验收情况</th>
                        <th colspan="3">项目增效情况</th>                            
                    </tr>
                    <tr>
                        <th>实施地点</th>
                        <th>品种</th>
                        <th>面积（亩）</th>
                        <th>总产（吨）</th>
                        <th>测产面积（亩）</th>
                        <th>测产样本数（点数）</th>
                        <th>测产品种</th>
                        <th>测产平均亩产（公斤/亩）</th>
                        <th>最高亩产（吨）</th>
                        <th>对照品种</th>
                        <th>对照平均亩产（公斤/亩）</th>
                        <th>平均价格（元）</th>
                        <th>平均亩增加投入（元）</th>
                        <th>平均亩增加收益（元）</th>
                    </tr>
                    <tr>
                        <td style="text-align:center">
                            {{detailModel.ImplePlace}}                                
                        </td> 
                        <td style="text-align:center">
                            {{detailModel.FVariety}}
                        </td>
                        <td>
                            {{detailModel.FArea}}
                        </td>
                        <td>
                            {{detailModel.FYield}}
                        </td> 
                        <td>
                            {{detailModel.CCArea}}                             
                        </td>
                        <td>
                            {{detailModel.CCSamples}}
                        </td>
                        <td>
                            {{detailModel.CCVariety}}
                        </td>
                        <td>
                            {{detailModel.CCavgMuYield}}
                        </td>
                        <td>
                            {{detailModel.CCbestMuYield}}  
                        </td>
                        <td>
                            {{detailModel.CCdzVariety}}
                        </td>  
                        <td>
                            {{detailModel.CCdzAvgMuYield}} 
                        </td>
                        <td>
                            {{detailModel.AvgPrice}}
                        </td>
                        <td>
                            {{detailModel.AvgMuInvest}}
                        </td>
                        <td>
                            {{detailModel.AvgMuIncome}} 
                        </td>
                    </tr>
                    <tr><th style="background-color:white;"></th></tr>
                    <tr>
                        <th colspan="5">推广情况</th>
                    </tr>
                    <tr>
                        <th>涉及乡镇数（个）</th>
                        <th>涉及村数（个）</th>
                        <th>涉及农户数（户）</th>
                        <th>涉及农业人数（人）</th>
                        <th>带动面积（亩）</th>
                    </tr>
                    <tr>
                        <td>
                            {{detailModel.Townships}}
                        </td>
                        <td>
                            {{detailModel.Villages}}  
                        </td>
                        <td>
                            {{detailModel.Farrmers}}  
                        </td>
                        <td>
                            {{detailModel.Peoples}}
                        </td>
                        <td>
                            {{detailModel.DDArea}}
                        </td>
                    </tr>
                    <tr><th style="background-color:white;"></th></tr>
                    <tr>
                        <th style="width:20%;height:100px">未完成情况说明</th>
                        <td style="text-align:center;height:100px">
                            {{detailModel.unFinishDescribe}}
                        </td>
                    </tr>
                </tbody>
            </table>
            <div slot="footer">
            </div>
        </Modal>
    </div>
</template>
<script>
export default{
    data(){
        return {
            showDetail:false,//显示详情
            detailModel:{},//详情表对象
            userInfo: this.GetlocaStorage("potUserinfo"),
            AreaList: [],//所属行政区划数组,
            TableCodeList: this.GetGroupDict("ReportTableName"),//表名称
            CreateYearList: this.GetGroupDict("ReportYear"),//周期
            ProjectSourceList:["部级","省级","省级以下"],
            tableStyle:{
                height:'440px',
                //marginBottom:'50px',
                width:'2900px'
                },
            searchModel: {
                ReportCode: 'PotProject',
                FillInYear: new Date().getFullYear()+"",
                AreaCode: this.GetlocaStorage("potUserinfo").AreaCode,
                Status:'',
                ProjectName:'',
                ProjectSource:'',
                PageNumber: 1, PageSize: 20
            },
            pageSizeOpts: [20, 40, 50],//默认分页最大设置
            dataList:[],
            clientHeight: window.innerHeight - 179,//表格默认高度
        }
    },
    methods:{
        SearchAreaList() {
            var areaCode = this.userInfo.AreaCode;
            var areaList=[];
            var templist = [];
            var areaEntity = new Object();
            areaEntity.value=areaCode;
            areaEntity.children=[];
            if (areaCode != '530000000000' && areaCode != null) {
                var item = this.GetlocaStorage("areatreelist")[0];
                areaEntity.label="全州（市）";
                for (var i = 0; i < item.children.length; i++) {
                    if (item.children[i].value == areaCode) {
                        areaList.push(item.children[i]);
                    }
                }
            } else {
                areaEntity.label="全省";
                areaList = this.GetlocaStorage("areatreelist");
            }
            templist.push(areaEntity);
             this.AreaList=templist.concat(areaList[0].children);
        },
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getPageData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getPageData();
        },
        
        //获取this.datas: {},//table数据对象
        getPageData() {
            var self = this;
            self.$http.get('PotProject/GetStatisListData', {params:this.searchModel}).then(function (res) {
                if (res.data.status === 1) {
                    self.dataList = res.data.model;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        Download(){
            window.open(this.$http.defaults.baseURL + "PotProject/GetStatisExcel?FillInYear="  + this.searchModel.FillInYear 
            + "&&AreaCode=" + this.searchModel.AreaCode
            +"&&ProjectSource=" + this.searchModel.ProjectSource
            +"&&ProjectName=" + this.searchModel.ProjectName
            );
        },
        SearchCascaderChange(value, selectedData) {
            const index = value.length - 1;
            this.searchModel.AreaCode = value[index];
            
        },
        rowStyle(index,length){  
            let striprow ={ backgroundColor: '#ebf7ff'};    
            if(index%2 !=0){
                return striprow;
            }
            else{
               return 
           }
        },
    },
    created:function(){
        this.SearchAreaList();
        this.getPageData();
    }
}
</script>